<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./line.css" />
	</head>
	<body>
		<div class="nav">
			<div class="menu">
				<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">番剧</a></li>
				<li><a href="#">电影</a></li>
				<li><a href="#">音乐</a></li>
				<li><a href="#">体育</a></li>
			</ul>
			</div>
			
		</div>
		<div class="line"></div>
		<script>
			const menu = document.querySelector('.menu')
			const line = document.querySelector('.line')
			
			line.style.left = `${menu.offsetLeft}px`
			menu.addEventListener('click',function(e){
				if (e.target.tagName == 'A'){
					console.log(e.target.offsetLeft)		
					line.style.transitionDuration = '0.5s'
					line.style.transform = `translateX(${e.target.offsetLeft - menu.offsetLeft}px)`
				}
			})
			window.addEventListener('resize',function(){
				line.style.transitionDuration = '0s'
				console.log(menu.offsetLeft)
				line.style.left = `${menu.offsetLeft}px`
			})
			
		</script>
	</body>		
</html>